<template>
  <div class="comments-box page" ref="webview">
    <van-nav-bar title="全部评价" class="bg_white" left-arrow @click-left="$router.go(-1)" />
    <div class="comments-tab">
      <template v-for="(item,index) in commentsTab">
        <div :key="index" class="tab" :class="{active: commentsTabIndex === item.state}">
          <span class="name" ref="commentsTab" @click="commentsTabchange(index)">
            {{item.name}}
            <span class="size">{{item.rate}}</span>
          </span>
        </div>
      </template>
      <!-- <span class="activeLine" v-if="commentsTabLeft" :style="'left:'+commentsTabLeft+'px;'+'width:'+commentsTabWidth+'px;'"></span> -->
    </div>
    <div class="content">
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
        <van-empty description="暂无数据" image="/static/img/empty-image-default.png" v-if="commentsList.length===0" />
        <van-list v-model="loading" :finished="finished" :finished-text="commentsList.length>3?'没有更多了':''" @load="onLoad"
          :offset="50" :immediate-check="false">
          <comments :list="commentsList" />
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>
<script>
import mixins from '@/utils/mixins';
export default {
  name: 'commentsListAll',
  data() {
    return {
      commentsTabIndex: 0,
      commentsTabLeft: 0,
      commentsTabWidth: 0,
      dataList: [],
      commentsTab: [
        {
          state: 1,
          name: '全部'
        },
        {
          state: 2,
          name: '好评'
        },
        {
          state: 3,
          name: '中评'
        },
        {
          state: 4,
          name: '差评'
        }
      ],
      apiUrl: 'commentsList',
      apiType: 'comments',
      params: {},
      commentsNumInfo: {}
    };
  },
  mixins: [mixins],
  created() {},
  mounted() {
    this.$nextTick(() => {
      this.params = {
        good: 0,
        gid: this.$route.query.gid
      };
      this.commentsTabchange(this.commentsTabIndex);
      this.commentsNum();
    });
  },
  computed: {
    commentsList() {
      return this.handleList(this.dataList) || [];
    }
  },
  methods: {
    commentsTabchange(index) {
      this.commentsTabIndex = index + 1;
      this.commentsTabWidth = this.$refs.commentsTab[index].offsetWidth;
      this.commentsTabLeft = this.$refs.commentsTab[index].offsetLeft;
      this.params = {
        good: index,
        gid: this.$route.query.gid
      };
      this.getList('commentsList', true);
    },
    commentsNum() {
      this.$API.comments.commentsNum(this.params).then(res => {
        if (!res.code) {
          let data = res.data;
          this.commentsTab = this.commentsTab.map((item, index) => {
            item.rate = '';
            if (index === 0) {
              item.rate = data.all;
            } else if (index === 1) {
            } else if (index === 2) {
              item.rate = data.middle;
            } else if (index === 3) {
              item.rate = data.cha;
            }
            return item;
          });
        }
      });
    },
    handleList(list) {
      list = list.map(item => {
        item.ImgList = [];
        item.ImgList = item.images.split(',');
        return item;
      });
      return list;
    }
  }
};
</script>
<style lang="less" scoped>
.comments-box {
  display: flex;
  flex-direction: column;
  .content {
    flex: 1;
    overflow: auto;
    background-color: #fff;
    .product-box {
      margin-top: 20px;
    }
  }
  .comments-tab {
    display: flex;
    line-height: 78px;
    padding: 20px 30px;
    position: relative;
    background-color: #fff;
    .tab,
    .all {
      display: block;
      text-align: center;
      border-radius: 70px;
      line-height: 68px;
      background-color: #f1f3f7;
      margin: 0 5px;
      .name {
        font-size: 28px;
        color: #666;
        display: inline-block;
      }
    }
    .tab {
      flex: 1;
      .size {
        position: relative;
        top: -2px;
        font-size: 22px;
      }
    }
    .all {
      width: 120px;
    }
    .tab.active,
    .all.active {
      background-color: #fff8f9;
      .name {
        color: #ff0034;
        font-weight: 800;
      }
    }
  }
}
</style>
